/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-upload-list {
	display: flex;
	flex-direction: column;
	gap: var(--pure-upload-list-gap, 10px);

	&__item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--pure-upload-list-item-gap, 10px);
		background: var(--pure-upload-list-item-background, var(--pure-background-default));
		padding: var(--pure-upload-list-item-padding, 12px 12px 18px);
		border-radius: var(--pure-upload-list-item-border-radius, var(--pure-radius-default));

		&__icon {
			flex-shrink: 0;
			font-size: var(--pure-upload-list-item-icon-font-size, var(--pure-font-size-big));
			font-weight: var(--pure-upload-list-item-icon-font-weight);
			color: var(--pure-upload-list-item-icon-color);
			--pure-icon-image-width: var(--pure-upload-list-item-icon-width);
			--pure-icon-image-height: var(--pure-upload-list-item-icon-height);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		&__body {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: var(--pure-upload-list-item-body-gap, 6px);
			overflow: hidden;
		}

		&__name {
			font-size: var(--pure-upload-list-item-name-font-size);
			font-weight: var(--pure-upload-list-item-name-font-weight);
			color: var(--pure-upload-list-item-name-color);
			text-align: var(--pure-upload-list-item-name-text-align, right);
		}

		&__progress {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--pure-upload-list-item-progress-gap, 8px);

			&__progress {
				flex: 1;
			}

			&__text {
				font-size: var(--pure-upload-list-item-progress-text-font-size);
				font-weight: var(--pure-upload-list-item-progress-text-font-weight);
				color: var(--pure-upload-list-item-progress-text-color);
			}
		}

		&__status {
			flex-shrink: 0;
			display: flex;
			flex-direction: var(--pure-upload-list-item-status-direction, row);
			align-items: center;
			justify-content: center;
			gap: var(--pure-upload-list-item-status-gap, 4px);

			&__icon {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: var(--pure-upload-list-item-status-icon-font-size);

				&--uploading {
					font-size: var(--pure-upload-list-status-uploading-icon-font-size);
					color: var(--pure-upload-list-status-uploading-icon-color, var(--pure-theme-primary));
					margin: var(--pure-upload-list-status-uploading-icon-margin);
					padding: var(--pure-upload-list-status-uploading-icon-padding);
				}

				&--fail {
					font-size: var(--pure-upload-list-status-fail-icon-font-size);
					color: var(--pure-upload-list-status-fail-icon-color, var(--pure-theme-danger));
					margin: var(--pure-upload-list-status-fail-icon-margin);
					padding: var(--pure-upload-list-status-fail-icon-padding);
				}

				&--success {
					font-size: var(--pure-upload-list-status-success-icon-font-size);
					color: var(--pure-upload-list-status-success-icon-color, var(--pure-theme-success));
					margin: var(--pure-upload-list-status-success-icon-margin);
					padding: var(--pure-upload-list-status-success-icon-padding);
				}

				&--delete {
					font-size: var(--pure-upload-list-status-delete-icon-font-size);
					color: var(--pure-upload-list-status-delete-icon-color, var(--pure-theme-danger));
					margin: var(--pure-upload-list-status-delete-icon-margin);
					padding: var(--pure-upload-list-status-delete-icon-padding);
				}
			}
		}
	}
}
